<template>
  <view w-full box-border pa-20rpx>
    <nut-popup v-model:visible="member_show" position="bottom" safe-area-inset-bottom>
      <nut-picker
        :columns="member_list"
        title="成员选择"
        @confirm="onConfirmMember"
        @cancel="member_show = false"></nut-picker>
    </nut-popup>
    <view bg="#fff" rounded-20rpx mb-20rpx>
      <nut-form ref="formRef" :model-value="form" :rules="rules">
        <nut-form-item prop="bindUserId" label="成员姓名">
          <nut-input
            v-model="form.bindUserName"
            readonly
            class="nut-input-text"
            placeholder="请选择"
            type="text"
            @click="member_show = true" />
        </nut-form-item>
        <nut-form-item prop="cardNo" :label="ticketCardObj[ticketCardType] + '号'">
          <nut-input v-model="form.cardNo" :placeholder="'请输入' + ticketCardObj[ticketCardType] + '号'" type="text" />
        </nut-form-item>
      </nut-form>
    </view>
  </view>
  <view position-fixed bottom-70rpx w-full z-999 px-40rpx box-border>
    <view
      w-670rpx
      h-100rpx
      rounded-50rpx
      bg="#FCC300"
      flex
      justify-center
      items-center
      font-500
      text="#000"
      text-32rpx
      mb-30rpx
      @click="bindTicket">
      立即绑定
    </view>
    <view
      w-670rpx
      h-100rpx
      rounded-50rpx
      bg="#D9D9D9"
      flex
      justify-center
      items-center
      font-500
      text="#7D7D7D"
      text-32rpx
      @click="goBack">
      暂不绑定
    </view>
  </view>
</template>

<script setup lang="ts">
import { getMyFamilyMemberList } from '@/api/familyMember'
import { bingTicket, bingMemberCard } from '@/api/myMemberCardAndTicket'
import { onLoad } from '@dcloudio/uni-app'
import type { FormInst } from 'nutui-uniapp'

const formRef = ref<FormInst | null>(null)
const ticketCardType = ref<number>(1)
const ticketCardObj = ref<any>({
  1: '电子票',
  2: '手环'
})

const rules = ref({
  bindUserId: [{ required: true, message: '请选择成员', trigger: 'blur' }],
  cardNo: [{ required: true, message: '请输入' + ticketCardObj.value[ticketCardType.value] + '号', trigger: 'blur' }]
})

const member_show = ref(false)

const form = ref<any>({
  bindUserId: '',
  cardNo: ''
})
const member_list = ref<any>([])

function onConfirmMember(val: any) {
  form.value.bindUserId = val.selectedValue[0]
  form.value.bindUserName = member_list.value.find((item: any) => item.value == val.selectedValue[0]).text
  member_show.value = false
}

function goBack() {
  uni.navigateBack({
    delta: 1 // 回退前 delta(默认为1) 页面数
  })
}
function init() {
  getMyFamilyMemberList().then((res: any) => {
    member_list.value = res.data.result.map((item: any) => {
      return {
        text: item.nickName,
        value: item.id
      }
    })
  })
}
function bindTicket() {
  formRef.value?.validate().then(({ valid }) => {
    if (!valid) return

    console.log(form.value)
    uni.showLoading({ title: '正在提交...', mask: true })

    const api = ticketCardType.value === 1 ? bingTicket : bingMemberCard

    api(form.value)
      .then(() => {
        uni.showToast({
          title: '绑定成功',
          icon: 'none',
          duration: 3000
        })
        goBack()
      })
      .catch((error) => {
        // uni.showToast({
        //   title: '绑定失败',
        //   icon: 'none',
        //   duration: 3000
        // })
      })
  })
}
onMounted(() => {})
onLoad((options: any) => {
  ticketCardType.value = parseInt(options.ticketCardType)
  if (ticketCardType.value == 2) {
    uni.setNavigationBarTitle({
      title: '绑定手环'
    })
  }
  
  init()
})
</script>
<style>
page {
}
</style>
<style scoped lang="scss"></style>
